zerone

개발 일지

next 테마를 이용하여 hexo 블로그 만들기

Posted on Edited on In

Node.js 설치

Node.js에서 본인 컴퓨터에 적합한 프로그램을 설치합니다.

hexo 설치

1
$ npm insall hexo-cli -g

More info: Writing

hexo 블로그 폴더 생성 및 설정

1
2
3
$ hexo init blog // blog 폴더가 생성됩니다. (blog 위치에 원하는 폴더명을 입력해주시면 됩니다.)
$ cd blog //새로 생성된 blog 폴더 위치로 이동합니다.
$ npm install

hexo 블로그 테마 불러오기

hexo를 이용하여 테마 불러오기

1
$ npm install hexo-theme-next

git clone을 이용하여 테마 불러오기

1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

(블로그 폴더)/_config.yml 파일에서 theme : 테마명으로 수정

1
2
# 저는 next theme을 설치하였으므로 next로 수정하겠습니다.
theme: next

(블로그 폴더)/_config.yml 내용 추가적으로 수정

1
2
3
4
5
6
7
8
9
10
11
title: zerone
subtitle: 개발 일지
description: 화이팅 !
author: zerone

# Deployment
deploy:
  type: git
  repo: https://github.com/eui-young/eui-young.github.io.git
  branch: main

새 포스트파일 생성

(블로그폴더)/source/ 폴더안에 _post폴더를 생성합니다.

_post 폴더 안에 포스트 파일을 작성하여 넣어주세요.

예시로 저는

1
2
3
4
5
6
7
8
9
10
---
layout: post
title: 포스트 제목
date: 2023-12-02
categorys: hexo
tags: [hexo]
comments: true
---

내용 작성...

작성하였습니다.

정적 파일 생성 (Generate static files )

1
$ hexo generate

More info: Generating

로컬 서버 구동

1
2
$ npm install hexo-server --save //hexo server 설치
$ hexo server // 또는 hexo s

로컬 서버 구동 후 localhost:4000 에 접속하여 수정사항이 제대로 적용되었는지 확인합니다.

More info: Server

git 레포지터리에 파일 적용

1
2
$ npm install hexo-deployer-git --save //설치 후 deploy가 가능합니다.
$ hexo deploy // hexo d -g   generate 후 deploy

More info: Deployment

적용 완료

deploy완료 후 deploy 연결 레포지터리에 업로드가 정상적으로 완료되었다면 블로그에 접속하여 변경사항을 확인해주세요.